<template>
    <div class="sortList">
        <mu-container>
            <mu-card style="width:47%; margin:3% 1% 0 1%;float:left;" v-for="item in listData"   @click="enterListDetails(item.data.content.data,item.data.content.data.id)" >
                <mu-card-media :sub-title="item.data.content.data.title" class="titleCard">
                    <img :src="item.data.content.data.cover.detail" class="imgCard">
                </mu-card-media>
            </mu-card>
        </mu-container>
    </div>
</template>

<script>
    export default {
        name: "sortDetails",
        component:{

        },
        data(){
            return {
                listData:[],
            }
        },
        methods:{
            getSortDetailsList(){
                let _self = this;
                let id = _self.$route.params.sortId;
                console.log(id);
                this.$axios({
                    method:'get',
                    url:'https://api.apiopen.top/videoCategoryDetails?id='+id,
                    data:this.qs.stringify({    //这里是发送给后台的数据

                    })
                }).then((response) =>{
                    let _self = this;
                    _self.listData = response.data.result;
                    console.log(response.data.result);

                }).catch((error) =>
                    console.log(error)       //请求失败返回的数据
                )
            },
            enterListDetails(data,id){
                let _self = this;
                _self.$router.push({
                    path:'/listDetails',
                    name:'listDetails',
                    params:{
                        prmData:data,
                        prmId:id,
                    }
                })
            }

        },
        mounted() {
            this.getSortDetailsList();
        }
    }
</script>

<style scoped>
.sortList{
    width:100%;
    height:auto;
    padding:0 3%;
    float:left;
    margin:46px 0 0 0;
}
.titleCard{
    width:100%;
    padding:0;
    margin:0;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp:1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}
.imgCard{
    width:100%;
    height:120px;
    border-radius:10px;
}
</style>